<!DOCTYPE html>
<html>
<head>
    <% include ../common/meta.ejs %>
    <% include ../common/public.ejs %>
    <style type="text/css">
        .input-group-addon {
            padding: 5px 12px;
        }
        .sku-atom-list {
            display : inline-block;
        }
        .sku-atom.active{
            margin-bottom : 90px;
        }
        .sku-atom {
            border : 0px solid #AAA;
            padding : 4px;
            display : inline-block;
            margin-right : 10px;
            margin-top : 5px;
            width : 114px;
            vertical-align : middle;
            text-align : center;
            position : relative;
            border-radius : 4px;
            cursor : pointer;
        }
        .close-modal{
            display : none;
        }
        .close-modal.small{
            top : -6px;
            right : -8px;
            width : 18px;
            height : 18px;
            font-size : 14px;
            line-height : 16px;
            border-radius: 9px;
        }
        .close-modal {
            position : absolute;
            z-index : 2;
            color : #fff;
            text-align: center;
            cursor : pointer;
            background: rgba(153,153,153,0.6);
        }

        .sku-atom span{
            display : block;
            width : 104px;
            overflow : hidden;
            text-overflow : ellipsis;
            white-space : nowrap;
        }
        .sku-atom .upload-img-wrap{
            position : absolute;
            left : 0;
            padding : 2px;
            width : 114px;
            background: #fff;
            border-radius : 4px;
            border : 1px solid #dcdcdc;
        }
        .sku-atom .upload-img-wrap .arrow{
            position : absolute;
            width : 0;
            height : 0;
            top : -5px;
            left : 44%;
            border-style : solid;
            border-color : transparent;
            border-left : 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom : 5px solid #000000;
        }
        .sku-atom .upload-img-wrap .arrow::after{
            position : absolute;
            display : block;
            width : 0;
            height : 0;
            border-color : transparent;
            border-style : solid;
            top : -10px;
            margin-left : -10px;
            border-bottom-color : #fff;
            border-top-width : 0;
            border-width : 10px;
            content : "";
        }
        .sku-atom .upload-img-wrap .add-image{
            width : 110px;
            height : 84px;
            line-height : 84px;
            text-align : center;
            background : #fff;
            font-size : 30px;
            color : #e5e5e5;
            cursor : pointer;
        }
        .sku-atom .upload-img-wrap .add-image .js-btn-add .fileupload{
            position : absolute;
            top : 0;
            right : 0;
            margin : 0;
            opacity : 0;
            cursor : pointer;
        }
    </style>
</head>
<body>
<% include ../common/header.ejs %>
<div class="container">
    <div class="dolphin-row main page-content">
        <div class="page-header">
            <h5 class="content-title">预定管理</h5>
        </div>
        <div class="queryCondition">
            <form class="query-form">
                <div class="row">
                    <!--<div class="col-md-4">
                        <label>入住时间：</label>
                        <input type="text" class="width3" name="_startDate" placeholder="yyyy-MM-dd">
                        ~
                        <input type="text" class="width3" name="_endDate" placeholder="yyyy-MM-dd">
                    </div>-->
                    <div class="col-md-5" style="margin-top: 3px">
                        <label class="col-md-offset-1 col-md-2 " style="width: 100px;margin-left: -20px">入住时间 :</label>
                        <div class="col-md-3">
                            <div class="input-group date dolphin_date_picker" style="margin-left: -20px">
                                <input class="width3" type="text" name="_startDate" placeholder="yyyy-MM-dd">
                                <span class="input-group-addon" style="padding: 0px 10px">
                                    <i class="glyphicon glyphicon-th"></i>
                                </span>
                            </div>
                        </div>
                        <div class="col-md-1" style="text-align: center;margin-left: 60px">
                            ~
                        </div>
                        <div class="col-md-3" style="margin-left: -20px">
                            <div class="input-group date dolphin_date_picker">
                                <input class="width3" type="text" name="_endDate" placeholder="yyyy-MM-dd">
                                <span class="input-group-addon" style="padding: 0px 10px">
                                    <i class="glyphicon glyphicon-th"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label>房屋编码：</label>
                        <input type="text" placeholder="模糊查询" name="house_code_obj_like_ae">
                    </div>
                    <div class="col-md-3">
                        <label>房屋名称：</label>
                        <input type="text" placeholder="模糊查询" name="house_name_obj_like_ae">
                    </div>
                </div>
                <div class="row">
                    <!--<div class="col-md-4">
                        <label>退房时间：</label>
                        <input type="text" class="width3" name="_startDate_t" placeholder="yyyy-MM-dd">
                        ~
                        <input type="text" class="width3" name="_endDate_t" placeholder="yyyy-MM-dd">
                    </div>-->
                    <div class="col-md-5" style="margin-top: 3px">
                        <label class="col-md-offset-1 col-md-2 " style="width: 100px;margin-left: -20px">退房时间 :</label>
                        <div class="col-md-3">
                            <div class="input-group date dolphin_date_picker" style="margin-left: -20px">
                                <input class="width3" type="text" name="_startDate_t" placeholder="yyyy-MM-dd">
                                <span class="input-group-addon" style="padding: 0px 10px">
                                    <i class="glyphicon glyphicon-th"></i>
                                </span>
                            </div>
                        </div>
                        <div class="col-md-1" style="text-align: center;margin-left: 60px">
                            ~
                        </div>
                        <div class="col-md-3" style="margin-left: -20px">
                            <div class="input-group date dolphin_date_picker">
                                <input class="width3" type="text" name="_endDate_t" placeholder="yyyy-MM-dd">
                                <span class="input-group-addon" style="padding: 0px 10px">
                                    <i class="glyphicon glyphicon-th"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label>联系手机：</label>
                        <input type="text" placeholder="模糊查询" name="code_like">
                    </div>
                    <div class="col-md-3">
                        <label>预订状态：</label>
                        <select style="width: 50%;" name="status">
                            <option value="">--请选择--</option>
                            <option value="1">待确认</option>
                            <option value="2">已确认</option>
                            <option value="0">自助取消</option>
                            <option value="-1">后台取消</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">
                        <button class="btn btn-sm btn-inverse btn-query" type="button">搜索</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    <h3 class="panel-title">
                        <i aria-hidden="true" class="fa fa-table fa-lg"></i>订单列表
                    </h3>
                    <div class="operationButton" style="float: right;margin-top:-26px;margin-right: -15px;">
                        <div class="btn-group float-right" role="group">
                            <button type="button" class="btn btn-success btn-sm" id="orderAdd">
                                <i class="glyphicon glyphicon-plus-sign"></i>新增
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="dataList" class="box-content"></div>
        </div>
    </div>
</div>
<!--订单-->
<div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="dataModalLabel">
    <div class="modal-dialog" role="document" style="top: 0">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <span class="modal-title">预订维护</span>
            </div>
            <div class="modal-body">
                <form class="form-horizontal edit-form">
                    <input type="hidden" class="form-control" name="id">
                    <input type="hidden" id="houseId" name="house.id">
                    <input type="hidden" id="userId" name="user.id">
                    <input type="hidden" id="days" name="days">

                    <div class="form-group">
                        <label class="col-md-2 control-label">入住客户</label>
                        <div class="col-md-4">
                            <div class="input-group">
                                <input type="text" class="form-control" name="contactName" id="contactName"
                                       dol-validate="required" readonly>
                                <span class="input-group-addon" id="selectUser">
                                        <i class="glyphicon glyphicon-search"></i>
                                </span>
                            </div>
                        </div>
                        <label class="col-md-2 control-label">客户手机</label>
                        <div class="col-md-4">
                            <input class="form-control" id="contactMobile" name="contactMobile" disabled type="text"
                                   dol-validate="required">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">订单类型</label>
                        <div class="col-md-4">
                            <select class="form-control" options="shortRentMethod" id="orderType"
                                    codeField="code" nameField="name" name="orderType" >
                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="dayContainer" style="display: none">
                        <label class="col-md-2 control-label">入住日期</label>
                        <div class="col-md-4">
                            <div class="input-group">
                                <input type="text" class="form-control orderRelStr" name="arrivedDate" id="arrivedDate" readonly>
                                <span id="pickRangeDate" class="input-group-addon">
                                        <i class="glyphicon glyphicon-th"></i>
                                </span>
                            </div>
                        </div>
                        <label class="col-md-2 control-label">退房日期</label>
                        <div class="col-md-4">
                            <div class="input-group">
                                <input type="text" class="form-control orderRelStr" name="leavedDate" id="leavedDate" readonly>
                                <span class="input-group-addon">
                                        <i class="glyphicon glyphicon-th"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" id="hourContainer" style="display: none">
                        <label class="col-md-2 control-label">入住时间</label>
                        <div class="col-md-4">
                            <div class="input-group">
                                <input type="text" class="form-control dolphin_datetime_picker orderRelStr" name="arrivedDate"
                                       id="arrivedTime" readonly>
                                <span class="input-group-addon">
                                        <i class="glyphicon glyphicon-th"></i>
                                </span>
                            </div>
                        </div>
                        <label class="col-md-2 control-label">钟点类型</label>
                        <div class="col-md-4">
                            <select class="form-control orderRelStr" options="shortRentType"
                                    id="shortRentType" codeField="code" nameField="name" name="shortRentType" >
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">入住房屋</label>
                        <div class="col-md-4">
                            <div class="input-group">
                                <input type="text" class="form-control orderRelStr" name="houseName" id="houseName"
                                       dol-validate="required" readonly>
                                <span class="input-group-addon" id="selectHouse" >
                                        <i class="glyphicon glyphicon-search"></i>
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-2 control-label">价格</label>
                        <div class="col-md-4">
                                <input class="form-control orderRelNum" id="rentPrice" name="rentPrice" type="text"
                                       value="0" dol-validate="required" />
                        </div>
                        <label class="col-md-2 control-label">佣金</label>
                        <div class="col-md-4">
                            <input class="form-control orderRelNum" id="commission" name="commission" type="text" value="0" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-2 control-label">支付方式</label>
                        <div class="col-md-4">
                            <select class="form-control" options="payMethod" id="payMethod"
                                    codeField="code" nameField="name" name="payMethod" >
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">订单状态</label>
                        <div class="col-md-4">
                            <select class="form-control" options="orderStatus" id="orderStatus"
                                    codeField="code" nameField="name" name="orderStatus" >
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary orderSave">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--显示客户-->
<div class="modal fade" id="userDetailModal" tabindex="-1" role="dialog" aria-labelledby="userDetailModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="dataModalLabel">客户信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal user-edit-form">
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">姓名</label>
                        <div class="col-md-6">
                            <span id="username"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">编码</label>
                        <div class="col-md-6">
                            <span id="usercode"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">身份证照片</label>
                        <input id="icFrontImg" name="icFrontImg" type="hidden" value=""/>
                        <input id="icBackImg" name="icBackImg" type="hidden" value=""/>
                        <div class="col-md-6">
                            <div class="js-sku-atom-list sku-atom-list" >
                                <div class="sku-atom active">
                                    <div class="atom-close close-modal small fjs-remove-sku-atom">×</div>
                                    <div class="upload-img-wrap ">
                                        <div class="js-upload-container" style="position:relative;">
                                            <div class="add-image js-btn-add">
                                                <img style="width : 100px ; height : 80px ;" id="usericFrontImg" src=""/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="js-sku-atom-list sku-atom-list" >
                                <div class="sku-atom active">
                                    <div class="atom-close close-modal small bjs-remove-sku-atom">×</div>
                                    <div class="upload-img-wrap ">
                                        <div class="js-upload-container" style="position:relative;">
                                            <div  class="add-image js-btn-add">
                                                <img style="width : 100px ; height : 80px ;" id="usericBackImg" src=""/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">身份证号码</label>
                        <div class="col-md-6">
                            <span id="useridCard"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">头像</label>
                        <input id="avatarImg" name="avatarImg" type="hidden" value=""/>
                        <div class="col-md-6">
                            <div class="js-sku-atom-list sku-atom-list" >
                                <div class="sku-atom active">
                                    <div class="atom-close close-modal small ajs-remove-sku-atom">×</div>
                                    <div class="upload-img-wrap ">
                                        <div class="js-upload-container" style="position:relative;">
                                            <div class="add-image js-btn-add">
                                                <img style="width : 100px ; height : 80px ;" id="useravatarImg" src=""/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">手机号码</label>
                        <div class="col-md-6">
                            <span id="userphone"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">推荐人会员号</label>
                        <div class="col-md-6">
                            <span id="userintroducer"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">会员状态</label>
                        <div class="col-md-6">
                            <span id="userstatus"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-offset-1 col-md-3 control-label">人员性别</label>
                        <div class="col-md-6">
                            <span id="usersex"></span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--用户选择器-->
<div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="userModalLabel">
    <div class="modal-dialog" role="document" style="left: 12%;top: 0;width: 80%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <span class="modal-title">用户选择器</span>
            </div>
            <div class="modal-body">
                <div class="queryCondition">
                    <form class="query-user-form">
                        <div class="row">
                            <div class="col-md-10">
                                <label>用户姓名：</label>
                                <input type="text" placeholder="支持模糊查询" name="name_like">
                                <label>联系方式：</label>
                                <input type="text" placeholder="支持模糊查询" name="phone_like">
                                <button class="btn btn-sm btn-inverse btn-query" id="queryUser" type="button">查询</button>
                            </div>

                        </div>
                    </form>
                </div>
                <div id="userList" class="box-content"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary confirmUser">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--房屋选择器-->
<div class="modal fade" id="houseModal" tabindex="-1" role="dialog" aria-labelledby="houseModalLabel">
    <div class="modal-dialog" role="document" style="left: 12%;top: 0;width: 80%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <span class="modal-title">房屋选择器</span>
            </div>
            <div class="modal-body">
                <div class="queryCondition">
                    <form class="query-house-form">
                        <div class="row">
                            <div class="col-md-10">
                                <label>房屋名称：</label>
                                <input type="text" placeholder="支持模糊查询" name="name_like">
                                <button class="btn btn-sm btn-inverse btn-query" id="queryHouse" type="button">查询</button>
                            </div>

                        </div>
                    </form>
                </div>
                <div id="houseList" class="box-content"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary confirmHouse">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<% include ../common/footer.ejs %>
</body>
</html>
